<template>
  <div class="Terminal_box" ref="boxTheSize">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-light">
          <div class="tltle_box">
            <div class="tltle_box_l">
              <div class="Material_r">
                <el-input placeholder="请输入关键字" v-model="inputText" @clear="seekTableList" clearable></el-input>
                <el-button type="primary" icon="el-icon-search" @click="seekTableList(2)">搜索</el-button>
                <!-- <el-button class="refresh" @click="advanced=true">高级搜索</el-button> -->
              </div>
            </div>
            <div class="tltle_box_r">
              <!-- <el-tooltip class="item" effect="dark" content="创建FTP" placement="top"> -->
                <el-button
                  @click="openEstablishFtp"
                  v-if="Invoking.forFunctionCode('ftpInfo:addFtp')"
                >
                  <img src="../../assets/images/ftp3_03.png" alt />
                   <div>创建FTP</div>
                </el-button>
              <!-- </el-tooltip> -->
              <!-- <img src="../../assets/images/ftp1_03.png" alt /> -->
              <!-- <img src="../../assets/images/ke4_03.png" alt /> -->
            </div>
          </div>
          <div class="Terminal_table">
            <zycm-table
              @zyLoadData="loadData"
              zy-table-ref="media_group_ftpUser_table"
              :zy-table-data="tabledataList"
              zy-table-height="63vh"
            >
              <!-- <el-table stripe :data="tableData" :height="TerminalHeight-300+'px'" ref="refTable"> -->
              <el-table-column label="ftp地址" prop="ipAddr" show-overflow-tooltip min-width="120"></el-table-column>
              <el-table-column label="端口" prop="port" show-overflow-tooltip width="80"></el-table-column>
              <el-table-column label="ftp预览地址" prop="previewPath" show-overflow-tooltip min-width="120"></el-table-column>
              <el-table-column label="预览端口" prop="previewPort" show-overflow-tooltip width="80"></el-table-column>
              <el-table-column label="ftp账户" prop="ftpUser" show-overflow-tooltip width="80"></el-table-column>
              <el-table-column label="ftp密码" prop="ftpPwd" show-overflow-tooltip width="80"></el-table-column>
              <el-table-column label="是否默认" prop="isDefault" show-overflow-tooltip width="80">
                <template slot-scope="scope">
                  <div v-show="scope.row.isDefault==0">否</div>
                  <div v-show="scope.row.isDefault==1">是</div>
                </template>
              </el-table-column>
              <el-table-column label="创建者" prop="userName" show-overflow-tooltip min-width="80"></el-table-column>
              <el-table-column label="操作" fixed="right"  width="100" >
                <template slot-scope="scope">
                  <el-dropdown
                    :size="GlobalVar.sizeSet.dropdown"
                    type="primary"
                    v-if="Invoking.ifFunctionCode('ftpInfo:updateDefaultById#ftpInfo:updateByPrimaryKey#tpInfo:deleteByPrimaryKey')"
                  >
                    <el-button type="primary" :size="GlobalVar.sizeSet.btn">
                      更多
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        @click.native="SetTheDefault(scope.row,'m')"
                        v-if="Invoking.forFunctionCode('ftpInfo:updateDefaultById')"
                      >设置默认</el-dropdown-item>
                      <el-dropdown-item
                        @click.native="clickCompile(scope.row)"
                        v-if="Invoking.forFunctionCode('ftpInfo:updateByPrimaryKey')"
                      >编辑FTP</el-dropdown-item>
                      <el-dropdown-item
                        @click.native="SetTheDefault(scope.row,'s')"
                        v-if="Invoking.forFunctionCode('ftpInfo:deleteByPrimaryKey')"
                      >删除FTP</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </zycm-table>

          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 系统公告 -->
    <el-dialog
      :title="this.flag?'编辑FTP':'创建FTP'"
      :visible.sync="establishFtp"
      :width="this.$store.getters.offsetWidth"
      @close="closeEstablishFtp"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <div>
            <el-form :model="establishForm" :rules="rules" ref="ruleForm" label-width="140px">
              <el-form-item label="FTP地址" prop="FTPsite">
               <!--  <el-input
                  placeholder="请输入FTP地址"
                  v-model="establishForm.FTPsite"
                  @blur="FTPsiteblur"
                ></el-input> -->
                <el-input
                  placeholder="请输入FTP地址"
                  v-model="establishForm.FTPsite"
                ></el-input>
              </el-form-item>
              <el-form-item label="FTP端口" prop="port">
                <el-input placeholder="请输入FTP端口" v-model="establishForm.port"></el-input>
              </el-form-item>
              <el-form-item label="FTP预览地址" prop="previewSite">
              <!--   <el-input
                  placeholder="请输入FTP预览地址"
                  v-model="establishForm.previewSite"
                  @blur="FTPsiteblur"
                ></el-input> -->
                 <el-input
                  placeholder="请输入FTP预览地址"
                  v-model="establishForm.previewSite"
                ></el-input>
              </el-form-item>
              <el-form-item label="预览端口" prop="previewPort">
                <el-input placeholder="请输入预览端口" v-model="establishForm.previewPort"></el-input>
              </el-form-item>
              <el-form-item label="FTP账户" prop="account">
                <el-input placeholder="请输入FTP账户" v-model="establishForm.account"></el-input>
              </el-form-item>
              <el-form-item label="FTP密码" prop="password">
                <el-input placeholder="请输入FTP密码" v-model="establishForm.password"></el-input>
              </el-form-item>
              <el-form-item label="资源模式" prop="ftpType">
                <el-select v-model="establishForm.ftpType" placeholder="请选择模式" @change="ftpTypeChange">
                  <el-option label="FTP服务" :value="1"></el-option>
                  <el-option label="OSS云存储" :value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="oss的Bucket" prop="bucketName" v-if="establishForm.ftpType === 2">
                <el-input placeholder="请输入oss的Bucket" v-model="establishForm.bucketName"></el-input>
              </el-form-item>
              <el-form-item label="传输模式" prop="openHttp">
                <el-select v-model="establishForm.openHttp" placeholder="请选择上传下载模式">
                  <el-option label="默认服务协议" :value="0"></el-option>
                  <el-option label="HTTP协议" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <span
            style="width: 100%;text-align: center;margin: 20px auto 0;height: 50px;display: block;"
            class="button_dialog"
          >
            <el-button
              style="background-color:#4d9ce0;color:#fff"
              @click="submitEstablishFtp('ruleForm')"
            >确 定</el-button>
            <el-button @click="resetForm('ruleForm')">重 置</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    var validatorNum = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入端口"));
      } else {
        var reg = /^[0-9]*$/;
        if (!reg.test(value)) {
          callback(new Error("请输入正确端口"));
          this.establishForm.port = "";
          return;
        }
        callback();
      }
    };
    return {
      query: {
        page: 1,
        pageSize: this.GlobalVar.query.pageSize,
        total: 0,
      },
      establishFtp: false,
      // 搜索字段
      inputText: "",
      TerminalHeight: "",
      tableData: [],
      establishForm: {
        FTPsite: "",
        port: "",
        previewSite: "",
        previewPort: "",
        account: "",
        password: "",
        ftpType: "",
        openHttp: "",
        bucketName:""
      },
      rules: {
        FTPsite: [
          { required: true, message: "请输入FTP地址", trigger: "blur" },
        ],
        port: [{ validator: validatorNum, trigger: "blur" }],
        previewSite: [
          { required: true, message: "请输入FTP预览地址", trigger: "blur" },
        ],
        previewPort: [{ validator: validatorNum, trigger: "blur" }],
        account: [
          { required: true, message: "请输入FTP账户", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入FTP密码", trigger: "blur" },
        ],
        ftpType: [
          { required: true, message: "请选择模式", trigger: "change" },
        ],
        openHttp: [
          { required: true, message: "请选择传输模式", trigger: "change" },
        ]
      },
      thisFormData: new FormData(),
      tabledataList: [], //保存当页的所有table数据
      tablePageList: [], //保存对应table的page数据
      flag: false
    };
  },
  /*watch: {
    establishForm: {
      handler(newValue, oldValue) {
        if (newValue.password) {
          this.establishForm.password = newValue.password.replace(
            /[\u4E00-\u9FA5]/i,
            ""
          );
        }
      },
      deep: true,
    },
  },*/
  created() {
    this.clientHeight();
    this.currentTableLoad("media_group_ftpUser_table", true);
    // this.tableList();
  },

  methods: {
    openEstablishFtp() {
      this.establishForm = {
        FTPsite: "",
        port: "",
        previewSite: "",
        previewPort: "",
        account: "",
        password: "",
        ftpType:"",
        bucketName:"",
        openHttp:""
      };
      if( this.$refs.ruleForm){
        this.$refs.ruleForm.resetFields();
      }
      this.flag = false;
      this.establishFtp = true;
    },
    //给子组件刷新用
    async loadData(formData, tableRef) {
      //提前修正isReqData状态 后续赋值随时会触发table组件的computed  后面还要进行一次修正
      for (let key in this.tabledataList) {
        if (this.tabledataList[key].ref === tableRef) {
          this.tabledataList[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
        } else {
          this.tabledataList[key].isReqData = false;
        }
      }

      //子组件触发查询时  处理查询的参数
      if (this.tablePageList[tableRef]) {
        this.tablePageList[tableRef].set("page", formData.get("page"));
        this.tablePageList[tableRef].set("pageSize", formData.get("pageSize"));
      }

      let res;
      if (tableRef == "media_group_ftpUser_table") {
        //发布-选择节目列表
        res = await this.$http.post(
          "ftpInfo/selectPage",
          this.tablePageList[tableRef]
        );
        // this.ProgramSelectList = [];
      }

      if (res && res.data.result === "success") {
        //记录更新分页数据
        res.data.ref = tableRef;
        //更新记录
        let sign = 0;
        for (let key in this.tabledataList) {
          if (this.tabledataList[key].ref === tableRef) {
            if (sign > 1) {
              //去掉重复数据
              this.tabledataList.splice(key, 1);
            } else {
              this.tabledataList.splice(key, 1, res.data);
              this.tabledataList[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
            }
            sign++;
          } else {
            this.tabledataList[key].isReqData = false;
          }
        }
        if (sign == 0) {
          //没有初始化时
          res.data.isReqData = true;
          this.tabledataList.push(res.data);
        }
      } else {
        if (res && res.data.result === "error") {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        } else {
          this.$message({
            type: "error",
            message: "请求数据出现异常",
          });
        }
      }
    },
    //当页刷新数据
    currentTableLoad(tableRef, firstPage, fd) {
      if (firstPage) {
        //加载第一页数据
        if (!this.tablePageList[tableRef]) {
          this.tablePageList[tableRef] = new FormData();
          this.tablePageList[tableRef].set("pageSize", this.GlobalVar.query.pageSize);
        }
        this.tablePageList[tableRef].set("page", 1);
      }
      //如果有其他查询参数 合并处理
      if (fd) {
        for (let item of fd.entries()) {
          this.tablePageList[tableRef].set(item[0], item[1]);
        }
      }
      this.loadData(this.tablePageList[tableRef], tableRef);
    },
    FTPsiteblur() {
      let re2 = /^(https:\/\/|http:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/]+)+$/;
      let re = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
      if (
        re.test(this.establishForm.FTPsite) ||
        re2.test(this.establishForm.FTPsite)
      ) {
      } else {
        this.establishForm.FTPsite = "";
      }
      if (
        re.test(this.establishForm.previewSite) ||
        re2.test(this.establishForm.previewSite)
      ) {
      } else {
        this.establishForm.previewSite = "";
      }
    },
    seekTableList(e) {
      // this.thisFormData.set("ipAddr", this.inputText);
      // this.tableList();
      let fd = new FormData();
      //终端列表查询
      if (e == 2) {
        fd.set("ipAddr", this.inputText);
        this.currentTableLoad("media_group_ftpUser_table", true, fd);
      } else {
        fd.set("ipAddr", "");
        this.currentTableLoad("media_group_ftpUser_table", true, fd);
      }
    },
    async tableList() {
      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");
      this.thisFormData.set("zycmToken", token);
      this.thisFormData.set("page", this.query.page);
      this.thisFormData.set("pageSize", this.query.pageSize);
      const { data: res } = await this.$http.post(
        "ftpInfo/selectPage",
        this.thisFormData
      );
      this.query.page = res.page;
      this.query.pageSize = res.pageSize;
      this.query.total = res.total;
      this.tableData = res.dataList;
    },
    // 点击提交系统公告
    async submitEstablishFtp(formName) {
      let url = "";
      let ftpId = "";
      if (this.flag) {
        url = "ftpInfo/updateByPrimaryKey";
        ftpId = this.CompileData.ftpId;
      } else {
        url = "ftpInfo/addFtp";
      }
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let formData = new FormData();
          let token = window.sessionStorage.getItem("token");
          formData.append("zycmToken", token);
          formData.append("ipAddr", this.establishForm.FTPsite);
          formData.append("port", this.establishForm.port);
          formData.append("ftpUser", this.establishForm.account);
          formData.append("ftpPwd", this.establishForm.password);
          formData.append("previewPath", this.establishForm.previewSite);
          formData.append("previewPort", this.establishForm.previewPort);
          formData.append("ftpId", ftpId);
          formData.append("ftpType", this.establishForm.ftpType);
          formData.append("openHttp", this.establishForm.openHttp);
          if(this.establishForm.bucketName != null){
            formData.append("bucketName", this.establishForm.bucketName);
          }else{
            formData.append("bucketName", '');
          }


          const { data: res } = await this.$http.post(url, formData);
          if (res.result == "success") {
            this.$message({
              type: "success",
              message: res.message,
            });
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
          this.establishFtp = false;
          this.currentTableLoad("media_group_ftpUser_table");
        } else {
          return false;
        }
      });
    },
    // 点击默认设置 删除
    SetTheDefault(e, t) {
      let text = "";
      let url = "";
      if (t == "m") {
        text = "此操作将设置默认";
        url = "ftpInfo/updateDefaultById";
      } else if (t == "s") {
        text = "此操作将删除";
        url = "ftpInfo/deleteByPrimaryKey";
      }
      this.$confirm(text + ",是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let formData = new FormData();
          let token = window.sessionStorage.getItem("token");
          formData.append("zycmToken", token);
          formData.append("ftpId", e.ftpId);
          const { data: res } = await this.$http.post(url, formData);
          if (res.result == "success") {
            this.$message({
              type: "success",
              message: res.message,
            });
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
          // this.query.page=1
          // this.query.pageSize=10
          this.seekTableList(2);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    resetForm(formName) {
      this.closeEstablishFtp();
    },
    // 点击编辑
    async clickCompile(e) {
      if(this.$refs.ruleForm){
         this.$refs.ruleForm.resetFields();
      }
      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      formData.append("ftpId", e.ftpId);
      const { data: res } = await this.$http.post(
        "ftpInfo/selectByPrimaryKey",
        formData
      );
      this.CompileData = e;
      this.establishForm.FTPsite = res.data.ipAddr;
      this.establishForm.port = res.data.port;
      this.establishForm.previewSite = res.data.previewPath;
      this.establishForm.previewPort = res.data.previewPort;
      this.establishForm.account = res.data.ftpUser;
      this.establishForm.password = res.data.ftpPwd;
      this.establishForm.ftpType = res.data.ftpType;
      this.establishForm.bucketName = res.data.bucketName || '';
      this.establishForm.openHttp = res.data.openHttp;

      this.flag = true;
      this.establishFtp = true;
    },
    //   点击搜索
    closeEstablishFtp() {
      this.establishForm = {
        FTPsite: "",
        port: "",
        previewSite: "",
        previewPort: "",
        account: "",
        password: "",
        ftpType:"",
        bucketName:"",
        openHttp:""
      };


    },
    clientHeight() {
      this.$nextTick(() => {
        this.TerminalHeight = this.$refs.boxTheSize.clientHeight - 95;
      });
    },
    ftpTypeChange(e){
      this.establishForm.bucketName = "";
    }
  },
};
</script>



<style lang="stylus" scoped>
/deep/.el-form-item__label{
    margin-top: 1px;
}
.Terminal_box {
   overflow: hidden;
  .BgColor {
    background-color: #e4f2ff;
    height: 100%;
  }
  /deep/.has-gutter .el-checkbox {
    display: none;
  }
  .tltle_box {
    margin: 1.5% 0;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    height: 100px;
    width: 100%;
    align-items: center;
    margin-bottom: 15px;
    border-radius: 5px;
    .tltle_box_l {
      display: flex;
      .Material_r {
        display: flex;
        margin-left: 20px;
        /deep/.el-button {
          margin: 0 0 0 20px;
          height: 40px;
          background-color: #2183d8;
        }
        .refresh {
          background-color: #fff;
          color: #2183d8;
        }
      }
    }
    .tltle_box_r {
      padding-right: 20px;
      .el-button {
        float: right;
        background-color: #f2faff;
        // width: 50px;
        height: 50px;
        border: none;
        margin-left: 0;
        margin: 0 5px;
          padding: 0 5px;
        border-radius: 5px;
        font-size:12px;
        img {
          width: 26px;
          height: 26px;
        }
      }
      /deep/.el-button:hover {
        background-color: #f2f2f2;
      }
    }
    /deep/.el-table th,
    .el-table tr {
      background-color: #fafafa;
    }
  }
  .Terminal_table {
    margin: 1.5% 0;
    width: 100%;
    background-color: #fff;
    border: 0.1px solid #fff;
    .el-table {
      margin: 1.5%;
      width: 97%;
      // padding: 20px;
      margin: 20px;
    }
  }
  .Terminal_tree {
    padding: 20px;
  }
  /deep/.el-tree {
    background-color: #e4f2ff;
  }
  .pagination {
    display: flex;
    height: 60px;
    justify-content: center;
  }
  /deep/.el-pager li,
  /deep/.el-pagination .btn-next,
  /deep/ .el-pagination .btn-prev {
    border: 1px solid #eee;
    border-radius: 5px;
    margin: 0 5px;
    color: #333;
    padding: 0;
  }
  /deep/.el-pager li.active {
    background-color: #2183d8;
    color: #fff;
  }
  /deep/.el-pagination__sizes {
    padding-left: 20px;
  }
  .fold {
    display: flex;
    width: 100%;
  }
  .fold /deep/.el-form-item__label {
    color: #0095fb;

  }
  .fold /deep/.el-form-item {
    width: 25%;
  }
  /deep/.el-tabs--bottom /deep/.el-tabs__item.is-bottom:nth-child(2),
  /deep/.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  /deep/.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  /deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 20px;
  }
  /deep/.el-tabs__item {
    padding: 0 20px;
  }
  /deep/.el-tabs__active-bar {
    padding: 0 20px;
    left: -20px;
    color: #2183d8;
  }
  /deep/.el-table th,
  .el-table tr {
    background-color: #fafafa;
  }
}
/deep/.el-dialog {
  .first_box {
    height: 250px;
    width: 99%;
    border: 1px solid #eee;
  }
  .auditOpinion {
    /deep/.el-form-item__label {
      line-height: 120px;
    }
    /deep/.el-form-item__label,
    /deep/.el-textarea__inner {
      height: 120px;
    }
  }

  /deep/.el-tree {
    background-color: #fff;
    padding: 0 0 5% 10%;
  }
  .selectTerminal {
    /deep/.el-tree {
      background-color: #fff;
      padding: 0 0 5% 10%;
    }
  }
  /deep/.el-select {
    display: block;
  }
  /deep/.el-dialog__header {
    background-color: #efefef;
    padding: 0;
    line-height: 50px;
    padding-left: 20px;
    color: #333;
    font-size: 16px;
  }
  /deep/.el-form-item__label {
    background-color: #efefef;
    border-radius: 0;
    height: 40px;
    border: 1px solid #dcdfe6;
    border-right: none;
    box-sizing: border-box;
    text-align: center;
    padding-left: 10px;
    //  margin-top: 1px;
  }
  /deep/.el-input__inner,
  /deep/.el-textarea__inner {
    border-radius: 0;
  }
  /deep/.el-button {
    padding: 12px 25px;
  }
  .opinion {
    /deep/.el-form-item__label {
      height: 80px;
      line-height: 80px;
       margin-top: 1px;
    }
  }
}
</style>
